<template>
  <div class="container">
    <div>
        <el-input placeholder="书籍名称" class="search-input" v-model="bookName"></el-input>
            <el-input placeholder="作者" v-model="author" class="search-input"></el-input>
            <el-input placeholder="出版社" v-model="publisher" class="search-input"></el-input>
            <el-input placeholder="分类" v-model="category" class="search-input"></el-input>
            <el-input placeholder="描述" v-model="description" class="search-input"></el-input>
            <el-input placeholder="价格" v-model="price" class="search-input"></el-input>
            <el-input placeholder="库存" v-model="stock" class="search-input"></el-input>
            <el-button type="primary" @click="add">搜索</el-button>
    </div>
    <div class="table-box">
            <el-table
    :data="bookData"
    border
    style="width: 100%"
    class="table">
    <el-table-column
      fixed
      prop="title"
      label="书籍名称"
      width="150">
       <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.title"></el-input>
            <span v-else>{{ scope.row.title }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="120">
      <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.author"></el-input>
            <span v-else>{{ scope.row.author }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="category"
      label="分类"
      width="120">
      <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.category"></el-input>
            <span v-else>{{ scope.row.category }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述"
      width="120">
       <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.description"></el-input>
            <span v-else>{{ scope.row.description }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="publisher"
      label="出版社"
      width="300">
      <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.publisher"></el-input>
            <span v-else>{{ scope.row.publisher }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="120">
      <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.price"></el-input>
            <span v-else>{{ scope.row.price }}</span>
          </template>
      
    </el-table-column>
    <el-table-column
      prop="stock"
      label="库存"
      width="120">
      <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.stock"></el-input>
            <span v-else>{{ scope.row.stock }}</span>
          </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
            <el-button @click="deleteBook(scope.row)" type="text" size="small">删除书籍</el-button>
            <el-button v-if="!scope.row.isEditing" @click="editBook(scope.row)" type="text" size="small">编辑</el-button>
            <el-button v-if="scope.row.isEditing" @click="updateBook(scope.row)" type="text" size="small">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 25]"
    :current-page="pageNum"
    :page-count="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
        </div>
  </div>
</template>

<script>
import service from "@/axios/axiosConfig"
export default {
  data() {
    return {
      bookName: "",
      author: "",
      publisher: "",
      category: "",
      description: "",
      price: "",
      stock: "",
        num: 1,
      bookData: [],
      total: "",
      pageNum: 1,
      pageSize: 5,
    };
  },
  methods: {
      editBook(row) {
      this.$set(row, 'isEditing', true);
    },
        async add() {
            const responseBody = {
                title: this.bookName,
                author: this.author,
                publisher: this.publisher,
                category: this.category,
                description: this.description,
                price: this.price,
                stock: this.stock
            }
            const response = await service.post('http://localhost:8080/adminBook/addBook', responseBody)
            console.log(response)
            this.$message.success("添加成功")
            this.$router.go(0)
        },
        async deleteBook(row) {
            const responseBody = {
                orderId: row.bookId
            }
            const response = await service.post('http://localhost:8080/adminBook/deleteBook', responseBody)
            console.log(response)
            this.$message.success("删除成功")
            this.$router.go(0)
        },
        async updateBook(row) {
            const responseBody = {
                title: row.title,
                author: row.author,
                publisher: row.publisher,
                category: row.category,
                description: row.description,
                price: row.price,
                stock: row.stock,
                bookId: row.bookId,
                publishDate: row.publishDate
          }
          const response = await service.post('http://localhost:8080/adminBook/updateBook', responseBody)
          console.log(response)
          this.$set(row, 'isEditing', false);
            this.$router.go(0)
    },
    async handleCurrentChange(newPageNum) {
      this.pageNum = newPageNum
          const responseBody={
            pageNum: newPageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
    this.bookData = response.data.data.list
    console.log(response.data.data)
    this.total = response.data.data.total
        this.totalPage = response.data.data.pages
    },
    async handleSizeChange(newPageSize) {
      this.pageSize = newPageSize
          const responseBody={
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
    this.bookData = response.data.data.list
    console.log(response.data.data)
    this.total = response.data.data.total
        this.totalPage = response.data.data.pages
        }
    },
  async created() {
        const responseBody={
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
    this.bookData = response.data.data.list
    console.log(response.data.data)
    this.total = response.data.data.total
        
        this.username = sessionStorage.getItem("username")
    },
}
</script>

<style scoped>
.search-input {
    width: 150px;
}
</style>